<extend name="Base/base"/>
<block name="main">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            类别信息输出表
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">类别信息</a></li>
            <li class="active">列表</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title"><i class="fa fa-th"></i>类别信息管理</h3>
                
                 <!--  <button class="btn btn-primary" onclick="Modal.alert({msg:'内容',title:'标题',btnok:'确定',btncl:'取消'});">提示框</button>
                  <button class="btn btn-primary" onclick="Modal.confirm({msg:'是否删除角色？'}).on(function (e) {alert('返回结果:'+ e);});">确认框</button> -->
                </div><!-- /.box-header -->
                <div class="box-body">
				<form class="form-inline" action="__CONTROLLER__/index" method="get">
				  <div class="form-group">
					<div class="input-group">
					  <input type="text" name="name" class="form-control" id="exampleInputAmount" placeholder="类别名"/>
					</div>
					&nbsp;&nbsp;
					<div class="input-group">
					  <input type="text" name="pid" class="form-control" id="exampleInputAmount" placeholder="父ID"/>
					</div>
				  </div>
				  <input type="submit" class="btn btn-primary" value="搜索"/>
				</form>
                  <table id="tid"  width="300px" class="table table-bordered table-hover">
					<thead>
						<tr>
						  <th style="width:60px">ID</th>
						  <th>类名</th>
						  <th>父ID</th>
						  <th>路径</th>
						  <th>操作</th>
						</tr>
					<thead>
					<tbody>
					   <foreach name="kindlist" item="kind">
							
							<tr class="kind{$kind.id}">
							  <td>{$kind.id}</td>
							  <td>{$kind.nbsp}|---{$kind.classname}</td>
							  <td>{$kind.pid}</td>
							  <td>{$kind.path}</td>
							  <td>
								 <button onclick="doDel({$kind.id},this)" class="btn btn-xs btn-danger">删除</button> &nbsp;
								<button onclick="doEdit({$kind.id})" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#updatekindModal">编辑</button>
								&nbsp;
								<button onclick="addc({$kind.id})" class="btn btn-xs btn-success" data-toggle="modal" data-target="#doAddchkindModal">添加子分类</button>
								</td>
							</tr>
					   </foreach>
				   </tbody>
                  </table>
                </div><!-- /.box-body -->
                <div class="box-footer clearfix">
				  <button class="btn btn-primary" data-toggle="modal" data-target="#addkindModal">添加类别</button>
                  <ul class="pagination pagination-sm no-margin pull-right">
                     <nav aria-label="Page navigation">
                       {$pageinfo}
					</nav>
                  </ul>
                </div>
              </div><!-- /.box -->

              
              
            </div><!-- /.col -->
            
          </div><!-- /.row -->
         
        </section><!-- /.content -->
</block>     
    
<block name="myscript">
	<!--添加-->
    <div class="modal fade" id="addkindModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">添加类别</h4>
          </div>
          <div class="modal-body">
            <form id="addkind">
				
				<div class="form-group">
					<label for="recipient-name" class="control-label">类别名：</label>
					<input type="text" name="classname" class="form-control" id="recipient-name">
				</div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" onclick="doAdd()" class="btn btn-primary">添加</button>
          </div>
        </div>
      </div>
    </div>
	<!--修改-->
     <div class="modal fade" id="updatekindModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">修改类别</h4>
          </div>
          <div class="modal-body">
            <form id="updatekind">
				<input type="hidden" id="editid" name="id"/>
              <div class="form-group">
                <label for="recipient-name" class="control-label">类别名：</label>
                <input type="text" id="editname" name="classname"  class="form-control" id="recipient-name">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" onclick="doUpdate()" class="btn btn-primary">修改</button>
          </div>
        </div>
      </div>
    </div>
	<!--添加子分类-->
	 <div class="modal fade" id="doAddchkindModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">添加子类别</h4>
          </div>
          <div class="modal-body">
            <form id="doAddchkind">
				<input type="hidden" id="CPid" name="pid"/>
				<input type="hidden" id="CPath" name="path"/>
              <div class="form-group">
                <label for="recipient-name" class="control-label">类别名：</label>
                <input type="text" id="editname" name="classname"  class="form-control" id="recipient-name">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" onclick="doAddch()" class="btn btn-primary">添加子类别</button>
          </div>
        </div>
      </div>
    </div>
    
	<script type="text/javascript">

		function doDel(id,obj){
			Modal.confirm({msg:'是否删除角色？'}).on(function (e) {
				if(e){
					$.ajax({
						type:'GET',
						url :'__CONTROLLER__/del',
						data:'id='+id,
						dataType:'json',
						success:function(res){
							if(res.b){
								$(obj).parents("tr").remove();
							}else{
								alert(res.info);
							}
						}
					});
				}
			});
		}
		
		function addc(id){
			$.ajax({
				type:'POST',
				url:'__CONTROLLER__/addch',
				data:'id='+id,
				dataType:'json',
				success:function(res){
					$("#CPid").val(res.id);
					$("#CPath").val(res.path);
				}
			});
			$("#doAddchkindModal").on("hidden.bs.modal",function(){
				$("#doAddchkind")[0].reset();
			});
		}
		
		function doAddch(){
			$.ajax({
				type:'POST',
				url: '__CONTROLLER__/insert',
				data:$("#doAddchkind").serialize(),
				dataType:'json',
				success:function(res){
					if(res.b){
						var str = '<tr class="kind'+res.id+'"><td>'+res.id+'</td>';
							str += '<td>'+res.nbsp+'|---'+res.classname+'</td>';
							str += '<td>'+res.pid+'</td>';
							str += '<td>'+res.path+'</td>';
							str += '<td> <button onclick="doDel('+res.id+',this)" class="btn btn-xs btn-danger">删除</button>&nbsp;&nbsp;';
							str += '<button onclick="doEdit('+res.id+')" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#updatekindModal">编辑</button> &nbsp;&nbsp';
							str += '<button onclick="addc({'+res.id+'})" class="btn btn-xs btn-success" data-toggle="modal" data-target="#doAddchkindModal">添加子分类</button></td></tr>';
							$(str).appendTo("#tid tbody");
					}else{
						Modal.alert({msg:res.info,title:'添加类别',btnok:'确定',btncl:'取消'});
					}
				}
			});
			$("#doAddchkindModal").modal("hide");
			
			$("#doAddchkindModal").on("hidden.bs.modal",function(){
				$("#doAddchkind")[0].reset();
			});	
		}
		
		function doAdd(){
			$.ajax({
				type:'POST',
				url: '__CONTROLLER__/insert',
				data:$("#addkind").serialize(),
				dataType:'json',
				success:function(res){
					//alert(res.num);
					if(res.b){
							var str = '<tr class="kind'+res.id+'"><td>'+res.id+'</td>';
								str += '<td>'+res.nbsp+'|---'+res.classname+'</td>';
								str += '<td>'+res.pid+'</td>';
								str += '<td>'+res.path+'</td>';
								str += '<td> <button onclick="doDel('+res.id+',this)" class="btn btn-xs btn-danger">删除</button>&nbsp;&nbsp;';
								str += '<button onclick="doEdit('+res.id+')" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#updatekindModal">编辑</button> &nbsp;&nbsp';
								str += '<button onclick="addc('+res.id+')" class="btn btn-xs btn-success" data-toggle="modal" data-target="#doAddchkindModal">添加子分类</button></td></tr>';
							$(str).appendTo("#tid tbody");
					}else{
						Modal.alert({msg:res.info,title:'添加类别',btnok:'确定',btncl:'取消'});
					}
				}
			});
			$("#addkindModal").modal("hide");
			$("#addkindModal").on("hidden.bs.modal",function(){
				$("#addkind")[0].reset();
			});	
		}
		
		function doEdit(id){
			$.ajax({
				type:'POST',
				url:'__CONTROLLER__/edit',
				data:'id='+id,
				dataType:'json',
				success:function(res){
					$("#editid").val(res.id);
					$("#editname").val(res.classname);
				}
			});
			$("#updatekindModal").on("hidden.bs.modal",function(){
				$("#updatekind")[0].reset();
			});
		}
		
		function doUpdate(){
			$.ajax({
				type:'POST',
				url:'__CONTROLLER__/update',
				data:$("#updatekind").serialize(),
				dataType:'json',
				success:function(res){
					if(res.b){
						$(".kind"+res.id).children().eq(1).html(res.nbsp+"|---"+res.classname);
					}else{
						Modal.alert({msg:res.info,title:'修改类别',btnok:'确定',btncl:'取消'});
					}
				}
			});
			$("#updatekindModal").modal("hide");
		}
	</script>
</block>
 